<template>
	<div class="input_">
		<input :type="type" :name="name" :placeholder="placeholder" :value="value" v-model="text" />
	</div>
</template>

<script>
export default {
	data() {
		return {
			text: ''
		};
	},
	props: ['type', 'name', 'placeholder', 'value'],
	methods: {
		handle() {
			this.$emit('textchanged', this.text);
		}
	},
	watch: {
		text() {
			this.handle();
		}
	}
};
</script>

<style lang="less">
.input_ {
	width: 100%;
	height: 30px;
	display: block;
	input {
		outline: none;
		border: none;
		background: white;
		width: 100%;
		height: 30px;
		padding: 0 1px;
		margin: 0;
		border-bottom: lightgray 1px solid;
	}
	input:focus {
		color: skyblue;
		border-bottom: skyblue 1px solid;
	}
}
</style>
